<template>
  <div>
    <div class="tools">
      <a-button  type="submit" title="上一页" @click.stop="prePage" class="but">
        上一页</a-button>
      <a-button  type="submit" title="下一页" @click.stop="nextPage" class="but">
        下一页</a-button>
      <div class="page">{{ pageNum }}/{{ pageTotalNum }}</div>
      <a-button  type="submit" title="顺时针" @click.stop="clock" class="but">
        顺时针</a-button>
      <a-button  type="submit" title="逆时针" @click.stop="counterClock" class="but">
        逆时针</a-button>
    </div>
    <pdf
      ref="pdf"
      :src="url"
      :page="pageNum"
      :rotate="pageRotate"
      @progress="loadedRatio = $event"
      @page-loaded="pageLoaded($event)"
      @num-pages="pageTotalNum = $event"
      @error="pdfError($event)"
      @link-clicked="page = $event"
    >
    </pdf>
    <div class="tools">
      <a-button  type="submit" title="上一页" @click.stop="prePage" class="but">
        上一页</a-button>
      <a-button  type="submit" title="下一页" @click.stop="nextPage" class="but">
        下一页</a-button>
      <div class="page">{{ pageNum }}/{{ pageTotalNum }}</div>
      <a-button  type="submit" title="顺时针" @click.stop="clock" class="but">
        顺时针</a-button>
      <a-button  type="submit" title="逆时针" @click.stop="counterClock" class="but">
        逆时针</a-button>
    </div>
  </div>
</template>

<style scoped>
.tools{
    width: 100%;
    text-align:center;
}
.page{
    display: inline-block;
}
.but{
    margin:5px;
}
</style>
<script>
import pdf from 'vue-pdf'
export default {
  props: ['src'],
  components: {
    pdf,
  },
  data() {
    return {
      url: 'https://wx.jxyprz.org.cn/ww/crm/msgaudit/get_media?mediaid=5f6aefdebb365942c0ccd4d0',
      pageNum: 1,
      pageTotalNum: 1,
      pageRotate: 0,
      // 加载进度
      loadedRatio: 0,
      curPageNum: 0,
    }
  },
  mounted() {
    this.url = this.src
    console.log('url',this.url)
  },
  methods: {
    // 上一页函数，
    prePage() {
      var page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },
    // 下一页函数
    nextPage() {
      var page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    },
    // 页面顺时针翻转90度。
    clock() {
      this.pageRotate += 90
    },
    // 页面逆时针翻转90度。
    counterClock() {
      this.pageRotate -= 90
    },
    // 页面加载回调函数，其中e为当前页数
    pageLoaded(e) {
      this.curPageNum = e
    },
    // 其他的一些回调函数。
    pdfError(error) {
      console.error(error)
    },
    // 打印全部
    pdfPrintAll() {
      this.$refs.pdf.print()
    },
    // 打印指定部分
    pdfPrint() {
      this.$refs.pdf.print(100, [1, 2])
    },
  },
}
</script>